<!doctype html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jQuery和CSS3时尚聊天框界面动画特效</title>
	<link rel="stylesheet" type="text/css" href="css/normalize.css" />
	<link rel="stylesheet" type="text/css" href="css/default.css">
	<link rel="stylesheet" type="text/css" href="css/styles.css">
	<!--[if IE]>
		<script src="http://cdn.bootcss.com/html5shiv/r29/html5.min.js"></script>
	<![endif]-->
</head>
<body>
	<div class="jq22-container">
		<header class="jq22-header">
			<h1>jQuery和CSS3时尚聊天框界面动画特效 <span>A jQuery plugin for Chat box</span></h1>
			
		</header>
		<div class="jq22-content bgcolor-3">
			<div id="chatbox">
				<div id="friendslist">
			    	<div id="topmenu">
			        	<span class="friends"></span>
			            <span class="chats"></span>
			            <span class="history"></span>
			        </div>

			        <div id="friends">
			        	<div class="friend">
			            	<img src="img/1_copy.jpg" />
			                <p>
			                	<strong>Miro Badev</strong>
				                <span>mirobadev@gmail.com</span>
			                </p>
			                <div class="status available"></div>
			            </div>

			            <div class="friend">
			            	<img src="img/2_copy.jpg" />
			                <p>
			                	<strong>Martin Joseph</strong>
				                <span>marjoseph@gmail.com</span>
			                </p>
			                <div class="status away"></div>
			            </div>

			            <div class="friend">
			            	<img src="img/3_copy.jpg" />
			                <p>
			                	<strong>Tomas Kennedy</strong>
				                <span>tomaskennedy@gmail.com</span>
			                </p>
			                <div class="status inactive"></div>
			            </div>

			            <div class="friend">
			            	<img src="img/4_copy.jpg" />
			                <p>
			                	<strong>Enrique	Sutton</strong>
				                <span>enriquesutton@gmail.com</span>
			                </p>
			                <div class="status inactive"></div>
			            </div>

			            <div class="friend">
			            	<img src="img/5_copy.jpg" />
			                <p>
			                <strong>	Darnell	Strickland</strong>
				                <span>darnellstrickland@gmail.com</span>
			                </p>
			                <div class="status inactive"></div>
			            </div>

			            <div id="search">
				            <input type="text" id="searchfield" value="Search contacts..." />
			            </div>

			        </div>

			    </div>

			    <div id="chatview" class="p1">
			        <div id="profile">

			            <div id="close">
			                <div class="cy"></div>
			                <div class="cx"></div>
			            </div>

			            <p>Miro Badev</p>
			            <span>miro@badev@gmail.com</span>
			        </div>
			        <div id="chat-messages">
			        	<label>Thursday 02</label>

			            <div class="message">
			            	<img src="img/1_copy.jpg" />
			                <div class="bubble">
			                	Really cool stuff!
			                    <div class="corner"></div>
			                    <span>3 min</span>
			                </div>
			            </div>

			            <div class="message right">
			            	<img src="img/2_copy.jpg" />
			                <div class="bubble">
			                	Can you share a link for the tutorial?
			                    <div class="corner"></div>
			                    <span>1 min</span>
			                </div>
			            </div>

			            <div class="message">
			            	<img src="img/1_copy.jpg" />
			                <div class="bubble">
			                	Yeah, hold on
			                    <div class="corner"></div>
			                    <span>Now</span>
			                </div>
			            </div>

			            <div class="message right">
			            	<img src="img/2_copy.jpg" />
			                <div class="bubble">
			                	Can you share a link for the tutorial?
			                    <div class="corner"></div>
			                    <span>1 min</span>
			                </div>
			            </div>

			            <div class="message">
			            	<img src="img/1_copy.jpg" />
			                <div class="bubble">
			                	Yeah, hold on
			                    <div class="corner"></div>
			                    <span>Now</span>
			                </div>
			            </div>

			        </div>

			        <div id="sendmessage">
			        	<input type="text" value="Send message..." />
			            <button id="send"></button>
			        </div>

			    </div>
			</div>
		</div>
		
	</div>
	
	<script src="http://www.jq22.com/jquery/1.11.1/jquery.min.js"></script>
	<script>
	$(document).ready(function () {
	    var preloadbg = document.createElement('img');
	    preloadbg.src = 'img/timeline1.png';
	    $('#searchfield').focus(function () {
	        if ($(this).val() == 'Search contacts...') {
	            $(this).val('');
	        }
	    });
	    $('#searchfield').focusout(function () {
	        if ($(this).val() == '') {
	            $(this).val('Search contacts...');
	        }
	    });
	    $('#sendmessage input').focus(function () {
	        if ($(this).val() == 'Send message...') {
	            $(this).val('');
	        }
	    });
	    $('#sendmessage input').focusout(function () {
	        if ($(this).val() == '') {
	            $(this).val('Send message...');
	        }
	    });
	    $('.friend').each(function () {
	        $(this).click(function () {
	            var childOffset = $(this).offset();
	            var parentOffset = $(this).parent().parent().offset();
	            var childTop = childOffset.top - parentOffset.top;
	            var clone = $(this).find('img').eq(0).clone();
	            var top = childTop + 12 + 'px';
	            $(clone).css({ 'top': top }).addClass('floatingImg').appendTo('#chatbox');
	            setTimeout(function () {
	                $('#profile p').addClass('animate');
	                $('#profile').addClass('animate');
	            }, 100);
	            setTimeout(function () {
	                $('#chat-messages').addClass('animate');
	                $('.cx, .cy').addClass('s1');
	                setTimeout(function () {
	                    $('.cx, .cy').addClass('s2');
	                }, 100);
	                setTimeout(function () {
	                    $('.cx, .cy').addClass('s3');
	                }, 200);
	            }, 150);
	            $('.floatingImg').animate({
	                'width': '68px',
	                'left': '108px',
	                'top': '20px'
	            }, 200);
	            var name = $(this).find('p strong').html();
	            var email = $(this).find('p span').html();
	            $('#profile p').html(name);
	            $('#profile span').html(email);
	            $('.message').not('.right').find('img').attr('src', $(clone).attr('src'));
	            $('#friendslist').fadeOut();
	            $('#chatview').fadeIn();
	            $('#close').unbind('click').click(function () {
	                $('#chat-messages, #profile, #profile p').removeClass('animate');
	                $('.cx, .cy').removeClass('s1 s2 s3');
	                $('.floatingImg').animate({
	                    'width': '40px',
	                    'top': top,
	                    'left': '12px'
	                }, 200, function () {
	                    $('.floatingImg').remove();
	                });
	                setTimeout(function () {
	                    $('#chatview').fadeOut();
	                    $('#friendslist').fadeIn();
	                }, 50);
	            });
	        });
	    });
	});
	</script>
</body>
</html>